<script setup lang="ts">
/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
defineOptions({
	name: "TbBill",
	inheritAttrs: false,
});
import {
	getTbBillPage,
} from "@/api/tbBill";

import {TbBillQuery} from "@/api/tbBill/types";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const total = ref(0);
const monthValue = ref('')

const queryParams = reactive<TbBillQuery>({
	pageNum: 1,
	pageSize: 20,
});
const billList = ref<[]>();



/**
 * 查询
 */
function handleQuery() {
	queryParams.billMonth = monthValue.value
	loading.value = true;
	getTbBillPage(queryParams)
			.then(({data}) => {
				billList.value = data.list;
				total.value = data.total;
			})
			.finally(() => {
				loading.value = false;
			});
}

/** 重置查询 */
function resetQuery() {
	queryParams.pageNum = 1;
	handleQuery();
}

onMounted(() => {
	let now = new Date()
	let month = now.getMonth()
	if (month < 9){
		monthValue.value = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
	}	else {
		monthValue.value = now.getFullYear() + '' + (now.getMonth() + 1) + ''
	}
	handleQuery(); // 初始化标准账单配置列表数据
});
</script>

<template>
	<div class="app-container">
		<el-row :gutter="20">

			<el-col>
				        <div class="search-container">
				          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
							  <el-form-item label="账单月份">
								  <el-date-picker
										  v-model="monthValue"
										  type="month"
										  value-format="YYYYMM"
										  :editable="false"
										  :clearable="false"
										  placeholder="选择月份"
								  />
							  </el-form-item>
				            <el-form-item label="商家订单号" prop="keywords">
				              <el-input
				                v-model="queryParams.keywords"
				                placeholder="请输入商家订单号"
				                clearable
				                style="width: 200px"
				                @keyup.enter="handleQuery"
				              />
				            </el-form-item>

				            <el-form-item>
				              <el-button type="primary" @click="resetQuery"
				                ><i-ep-search />搜索</el-button
				              >
				              <el-button @click="resetQuery">
				                <i-ep-refresh />
				                重置</el-button
				              >
				            </el-form-item>
				          </el-form>
				        </div>

				<el-card shadow="never">

					<el-table
							size="small"
							:header-row-style="{color: 'dimgray'}"
							v-loading="loading"
							:data="billList"
							border
					>
						<el-table-column
								label="入账时间"
								align="center" show-overflow-tooltip
								prop="settlementTime"
								width="180"
						/>
						<el-table-column
								label="支付宝交易号"
								width="180"
								align="center" show-overflow-tooltip
								prop="orderNo"
						/>
						<el-table-column
								label="支付宝流水号"
								width="180"
								align="center" show-overflow-tooltip
								prop="flowNo"
						/>

						<el-table-column
								label="商户订单号"
								width="180"
								align="center" show-overflow-tooltip
								prop="sellerNo"
						/>

						<el-table-column
								label="账务类型"
								width="180"
								align="center" show-overflow-tooltip
								prop="settlementType"
						/>
						<el-table-column
								label="收入（+元）"
								align="center" show-overflow-tooltip
								prop="incomeAmount"
								width="120"
						/>
						<el-table-column
								label="支出（-元）"
								align="center" show-overflow-tooltip
								prop="payAmount"
								width="180"
						></el-table-column>
						<el-table-column
								label="账户余额（元）"
								align="center" show-overflow-tooltip
								prop="balance"
								width="180"
						></el-table-column>
						<el-table-column
								label="服务费（元）"
								align="center" show-overflow-tooltip
								prop="serviceAmount"
								width="180"
						></el-table-column>
						<el-table-column
								label="支付渠道"
								align="center" show-overflow-tooltip
								prop="channel"
								width="80"
						></el-table-column>
						<el-table-column
								label="签约产品"
								align="center" show-overflow-tooltip
								prop="signProduct"
								width="180"
						></el-table-column>
						<el-table-column
								label="对方账户"
								align="center" show-overflow-tooltip
								prop="buyAccount"
								width="180"
						></el-table-column>
						<el-table-column
								label="对方名称"
								align="center" show-overflow-tooltip
								prop="buyName"
								width="180"
						></el-table-column>
						<el-table-column
								label="银行订单号"
								align="center" show-overflow-tooltip
								prop="bankNo"
								width="180"
						></el-table-column>
						<el-table-column
								label="商品名称"
								align="center" show-overflow-tooltip
								prop="productName"
								width="180"
						></el-table-column>
						<el-table-column
								label="备注"
								align="center" show-overflow-tooltip
								prop="remark"
								width="180"
						></el-table-column>
						<el-table-column
								label="业务基础订单号"
								align="center" show-overflow-tooltip
								prop="businessBaseNo"
								width="180"
						></el-table-column>
						<el-table-column
								label="业务订单号"
								align="center" show-overflow-tooltip
								prop="businessNo"
								width="180"
						></el-table-column>
						<el-table-column
								label="业务账单来源"
								align="center" show-overflow-tooltip
								prop="businessBillSource"
								width="180"
						></el-table-column>
						<el-table-column
								label="业务描述"
								align="center" show-overflow-tooltip
								prop="businessRemark"
								width="180"
						></el-table-column>
						<el-table-column
								label="付款备注"
								align="center" show-overflow-tooltip
								prop="payRemark"
								width="180"
						></el-table-column>
					</el-table>

					<pagination
							v-if="total > 0"
							v-model:total="total"
							v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize"
							@pagination="handleQuery"
					/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
